<template>
  <Card>
    <div class="content">
      <img src="@/assets/help-bg.png" alt="" />
      <van-form @submit="onSubmit">
        <van-field
          readonly
          clickable
          name="picker"
          :value="form.typeName"
          label="心愿类型"
          placeholder="点击选择心愿类型"
          @click="showPicker = true"
          :rules="[{ required: true, message: '请选择心愿类型' }]"
        />
        <van-field
          v-model="form.title"
          name="心愿标题"
          label="心愿标题"
          placeholder="请输入心愿标题"
          :rules="[{ required: true, message: '请输入心愿标题' }]"
        />
        <van-field
          v-model="form.content"
          rows="3"
          type="textarea"
          name="内容描述"
          label="内容描述"
          placeholder="请输入内容描述"
          :rules="[{ required: true, message: '请输入内容描述' }]"
        />
        <van-field
          v-model="form.remark"
          rows="3"
          type="textarea"
          name="申请人备注"
          label="申请人备注"
          placeholder="请输入申请人备注"
        />
        <div class="submit">
          <van-button
            round
            block
            color="linear-gradient(to right, #ff4e38, #ffba44)"
            type="info"
            native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          value-key="name"
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
    </div>
  </Card>
</template>

<script>
import Card from "@/components/Card.vue";
import {
  postWxyAdd,
  postAllTypes,
  postWxyMyDetail,
  postWxyEdit,
} from "@/api/business";

export default {
  name: "PostWish",
  components: { Card },
  data() {
    return {
      form: {
        typeId: "",
        typeName: "",
        title: "",
        content: "",
        remark: "",
      },
      type: "", //操作类型
      eventId: null, //心愿id
      showPicker: false,
      columns: [],
    };
  },
  created() {},
  mounted() {
    let query = this.$route.query || {};
    this.eventId = query.eventId || null;
    this.type = query.type || "";
    this.loadTypeList();
  },
  methods: {
    //提交
    onSubmit(values) {
      if (this.type == "EDIT") {
        const data = { ...this.form, eventId: this.eventId };
        postWxyEdit(data).then((res) => {
          this.$toast.success({
            message: res.msg,
            duration: 1000,
          });
          this.$router.push("/myWish");
        });
      } else {
        postWxyAdd(this.form).then((res) => {
          this.$toast.success({
            message: res.msg,
            duration: 1000,
          });
          this.$router.push("/myWish");
        });
      }
    },
    //选择器事件
    onConfirm(value) {
      this.form.typeId = value.typeId;
      this.form.typeName = value.name;
      this.showPicker = false;
    },
    //获取类型数据
    loadTypeList() {
      postAllTypes().then((res) => {
        this.columns = res.data;
        if (this.type == "EDIT") {
          this.loadMyInfo();
        }
      });
    },
    //获取详情
    loadMyInfo() {
      postWxyMyDetail({ eventId: this.eventId }).then((res) => {
        this.form = { ...res.data } || {};
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: 100%;
  img {
    width: 100%;
    height: 350px;
  }
  .submit {
    width: 100%;
    // background-color: #f4f4f4;
    padding: 200px 0;
    box-sizing: border-box;
    .van-button {
      width: 80%;
      margin: 0 auto;
    }
  }
}
</style>
